<template>
  <!--今日毕拼轮播图区-->
  <swiper class="lbts" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(val, key) in imglist" :key = key>
      <!--拼购标题-->
      <div class="grouptop">
        <div class="manygr">今日毕拼 <span class="hands">14</span> :
          <span class="minute">23</span> :
          <span class="second">08</span> .
          <span class="microsecond">5</span></div>
        <div class="more" @click="today">更多</div>
      </div>
      <!--图片类容-->
      <div class="Pccotb">
        <Isfrseeding></Isfrseeding>
      </div>
    </swiper-slide>
    <!--指针轮播图-->
    <div  class="swiper-pagination" slot="pagination">
    </div>
  </swiper>
</template>

<script>
  import Isfrseeding from '../Isfrseeding/Isfrseeding'
  export default {
    name: "LBT",
    data() {
      return {
        imglist: [1,2,3],
        swiperOption: {
          autoplay: {
            delay:3000,
            // 用户操作之后是否禁止
            disableOnInteraction:true
          },
          loop: true,
          preventLinksPropagation: false,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'bullets'
          }
        },
      }
    },
    methods:{
      today (){
        this.$router.push({path:'PD-today/pd_today'});
      },
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    components:{
      Isfrseeding
    },
    mounted() {
      let pointer =this.swiper.pagination.bullets;
      // let el =
      for (let i = 0; i < pointer.length; i++) {
        pointer[i].style.width = '10px';
        pointer[i].style.height = '3px';
      }
    }
  }
</script>

<style scoped lang="scss">
  .lbts{
    width: 100%;
    height: 100%;
    padding: 15px;
    background: white;
    border-radius: 40px;
    box-sizing: border-box;
  }
  .swiper-slide{
    font-size: 50px;
    width: 690px;
    height: 250px;
  }
  .img{
    width: 100vw;
    height: 100%;
  }
  .grouptop{
    line-height: 130px;
    display: flex;
    .manygr{
      flex: 1;
      text-indent: 2em;
      color: #414141;
      background: url("../../../assets/flash.png") no-repeat 40px center;
      background-size: 50px 40px;
      font-size: 45px;
      font-weight: bold;
      span{
        background: #4c4c4c;
        color: white;
        border-radius: 10px;
        width: 45px;
        height: 45px;
        font-size: 24px;
        line-height: 45px;
        padding: 0 3px;
      }
      .microsecond{
        background: #ef4d3e;
        padding: 0 15px;
      }
    }
    .more{
      width: 200px;
      text-align: center;
      font-size: 36px;
      color: #7d7d7d;
      background: url("../../../assets/goToday.png") no-repeat 90% center;
      background-size: 40px 40px;
    }
  }
  .Pccotb{
    width: 1105px;
    margin: auto;
    height: 450px;
    overflow: hidden;
    position: relative;
  }
</style>

